var markerUrl =  'http://maps.gstatic.com/mapfiles/marker.png';
wizard = {
  geocoder: new google.maps.Geocoder,
  state: {
    map: {
      useBounds: true
    },
    markerCollections: {},
    selectedCollection: null,
    misc: {}
  },
  init: function($) {
    var map = wizard.map = new google.maps.Map($('#map-canvas')[0], {
      center: new google.maps.LatLng(-33.8, 151.3),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    $('#geocode').submit(function(e) {
      var address = $('#location', this).val();
      if (address) {
        wizard.geocoder.geocode({
          address: address,
          bounds: wizard.map.getBounds()
        }, wizard.onGeocode);
      }
      return e.preventDefault();
    });

    google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
      wizard.state.map.bounds = wizard.map.getBounds();
      wizard.boundsWidget = new BoundsWidget(wizard.map, function(b) {
        wizard.state.map.bounds = b;
      });
      mapOptions.updateState();
    });

    var mapOptions = new MapOptions($('#mapoptions')[0], wizard.state,
        function(state) {
      wizard.boundsWidget.setVisible(state.map.useBounds);
      map.setMapTypeId(google.maps.MapTypeId[state.map.mapTypeId]);
    });

    var infowindow = new google.maps.InfoWindow;
    var addCollection =
        new MarkerCollectionOptions($('#marker-collection-sentinel'),
                                    $('#marker-collection-delete'),
                                    $('#markeroptions'),
                                    wizard.state,
                                    wizard.map,
                                    infowindow);
    addCollection.addCollection('Untitled');

    var addMarker = new AddMarker($('#addMarker')[0],
                                  wizard.state,
                                  wizard.geocoder);
    google.maps.event.addListener(map, 'click', function(e) {
      addMarker.addMarker(e.latLng);
    });

    new PageOptions($('#pagemapoptions')[0], wizard.state);
    wizard.initNav($);
  },
  initNav: function($) {
    if (!window.location.hash) {
      window.location.hash = "#tab=pagemapoptions";
    }
    var tab = wizard.setTab();
    $('nav a[href=' + window.location.hash + ']').addClass('active');
    $('nav a').click(function() {
      $('nav a.active').removeClass('active');
      $(this).addClass('active');
      setTimeout(wizard.setTab, 0);
    });
  },
  tabs: ['#pagemapoptions', '#markers', '#preview', '#code'],
  setTab: function() {
    var index = window.location.hash.indexOf('tab=');
    if (index == -1) {
      return;
    }
    var tab = window.location.hash.substring(index + 4);
    $(wizard.tabs.join(',')).hide();
    $('#' + tab).show();
    switch (tab) {
      case 'preview':
      case 'code':
        wizard.generatePreview();
    }
    return tab;
  },
  onGeocode: function(result, status) {
    if (status !== google.maps.GeocoderStatus.OK) {
      alert(status);
    } else {
      wizard.map.fitBounds(result[0].geometry.viewport);
    }
  },
  generatePreview: function() {
    var code = new Generator().generate(wizard.state);
    $('#preview_html').val(code);
    var iframe = $('#preview iframe')[0];
    var doc = iframe.contentWindow || iframe.contentDocument;
    doc = doc.document || doc;
    doc.open();
    doc.write(code);
    doc.close();
  }
};
jQuery(wizard.init);
